import React, { Component } from 'react';
import ReactDom from 'react-dom';
import util from "@/common/util";
import layer from "@/common/layer";
import axios from 'axios';
import ReactSwiper from 'reactjs-swiper';
import jquery from 'jquery';


class Loanindex extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loanList: ['zhangan'],
            linkUrl: []
        }
    }

    async sendcode() {
        var wechatcode = util.getQuery().code;
        let res = await util.rjax({
            url: '/wxAuthenticate/getOpenId?code=' + wechatcode,
            type: 'post',
        }).catch((res) => {
            console.log("catch:" + res)
        })

        if (res) {
            console.log("if(res):" + res)
            sessionStorage.setItem("openid", res.data.openId)
        }
    }

    componentDidMount() {
        if (util.getQuery().code) {
            var openid = sessionStorage.getItem("openid")
            if (!openid || openid === 'null') {
                this.sendcode()
            }
        }
        else {
            window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxeaccffdd3826280c&redirect_uri=http%3a%2f%2fwww.rongsue.com%2fwechat%2floanindex.html&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect`
        }

        let getconfig = async function () {
            let res = await util.rjax({
                url: "/wx/getwx?url=" + encodeURIComponent(window.location.href.split('#')[0]),
                type: "POST"
            })

            if (res) {
                wx.config({
                    debug: false,
                    appId: 'wxeaccffdd3826280c', // 必填，公众号的唯一标识
                    timestamp: parseInt(res.data.timestamp),// 必填，生成签名的时间戳
                    nonceStr: res.data.nonceStr,// 必填，生成签名的随机串
                    signature: res.data.signature,// 必填，签名
                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']// 必填，需要使用的JS接口列表
                })
            }
        }
        getconfig()

        var that = this
        wx.ready(function () {
            //朋友圈
            wx.onMenuShareTimeline({// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
                title: '贷款产品', // 分享标题
                link: 'http://www.rongsue.com/wechat/loanindex.html', // 分享链接
                imgUrl: 'http://img0.rongsue.com/FhPPbNUHNQRD7tw7P2ozrnxh_GIm',
                success: function (res) {
                },
                cancel: function (res) {
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });

            //朋友
            wx.onMenuShareAppMessage({//获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
                title: '贷款产品', // 分享标题
                desc: '大额贷款、小额贷款、新口子', // 分享描述
                link: 'http://www.rongsue.com/wechat/loanindex.html', // 分享链接
                imgUrl: 'http://img0.rongsue.com/FhPPbNUHNQRD7tw7P2ozrnxh_GIm', // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                    that.setState({ share: true })
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        });

        this.getlist()

        jquery(".loanpro").on("click", ".item", function () {
            var id = jquery(this).data("id");
            var type = jquery(this).data("type");
            if (type === 2) {
                jquery(this).children('a').attr('href', './largeloandet.html?id=' + id + "&type=" + type)
            } else if (type === 1) {
                jquery(this).children('a').attr('href', './largeloandet.html?id=' + id + "&type=" + type)
            }

        });
    }

    async getlist() {
        let res = await util.rjax({
            url: '/other/list?recommend=1',
            type: 'get',
        })
        this.setState({ loanList: res.data.rows });
    }

    render() {
        let loans = this.state.loanList.map((item, index) => {
            return (
                <div className="item" data-id={item.id} data-type={item.type} key={index}>
                    <a href='#'>
                        <img className="icon" src={item.image} alt="" />
                        <span className="protit">{item.title}</span>
                        <p className="prolimit">最高{item.loanMax}元</p>
                        <p className="propoint">{item.summary}</p>
                    </a>
                </div>
            )
        })
        return (
            <div>
                <div id="loanindex">
                    <div className="header">
                        <img src="/assets/wechat/top_picword.png" alt="" />
                    </div>
                    <div className="loantype">
                        <div className="item">
                            <a href="./largeloan.html">
                                <img src="/assets/wechat/bigloan.png" alt="" />
                                <span className="loanname">大额贷款</span>
                                <span className="loannum">10-1000万</span>
                            </a>
                        </div>
                        <div className="item">
                            <a href="./minloan.html">
                                <img src="/assets/wechat/smallloan.png" alt="" />
                                <span className="loanname">小额贷款</span>
                                <span className="loannum">4千-20万</span>
                            </a>
                        </div>
                        <div className="item">
                            <a href="./newloan.html">
                                <img src="/assets/wechat/newloan.png" alt="" />
                                <span className="newloanname">新口子</span>
                            </a>
                        </div>
                    </div>
                    <div className="loanpro">
                        {loans}
                    </div>
                </div>
            </div>
        )
    }
}
ReactDom.render(<Loanindex />, document.getElementById("app"));